import React, { useState } from "react";
import "./header.css";
import { DownOutlined } from "@ant-design/icons";
import { connect } from "react-redux";

import { Modal } from "antd";
import List from "../List/list";
import Modals from "../Modal/Modal";

// import { Link} from 'react-router-dom'

function Header(props) {
  console.log("Header渲染了");
  const [classIndex, setClassIndex] = useState(0);
  function changeClass(e) {
    setClassIndex(e.currentTarget.getAttribute("data-index"));
  }
  // function search() {
  //   alert("撞单查询");
  // }
  // function newcus() {
  //   alert("新增客户");
  // }
  const [arrowchange, setArrowchange] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
    // return <Modals></Modals>;
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  function clickHeighSearch() {
    setArrowchange(!arrowchange);
    if (arrowchange) {
      props.showDown();
    } else {
      props.showUp();
    }
  }
  return (
    <div id="header">
      <div className="leftTitle">
        {/* <a to="/newcus"><span>今日新增</span><span>4</span></a> */}
        {/* eslint-disable-next-line */}

        <div
          className={"0" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="0"
        >
          <span>跟单列表</span>
          <span>4</span>
        </div>
        <div
          className={"1" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="1"
        >
          <span>今日跟进</span>
          <span>4</span>
        </div>
        <div
          className={"2" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="2"
        >
          <span>本周跟进</span>
          <span>4</span>
        </div>
        <div
          className={"3" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="3"
        >
          <span>今日跟单记录</span>
          <span>4</span>
        </div>
        <div
          className={"4" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="4"
        >
          <span>本周跟单记录</span>
          <span>4</span>
        </div>
        <div
          className={"5" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="5"
        >
          <span>本月跟单记录</span>
          <span>4</span>
        </div>
        <div
          className={"6" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="6"
        >
          <span>数据导出</span>
        </div>
        <div className={"7" === classIndex ? "active" : ""} data-index="7">
          <span onClick={showModal}>新增跟单</span>
        </div>
        <div
          className={"8" === classIndex ? "active" : ""}
          onClick={changeClass}
          data-index="8"
        >
          <span>自定义设置</span>
        </div>
        {/* <div className="search" onClick={search}><span>撞单查询</span></div>
			    <div className="newcus" onClick={newcus}><span>新增客户</span></div> */}
      </div>

      <div className="rightSearch">
        <div>
          <input type="text" />
        </div>
        <div>搜索</div>
        <div onClick={clickHeighSearch}>
          高级搜索
          <span>
            <DownOutlined className={arrowchange ? "arrowup" : "arrowdown"} />
          </span>
        </div>
      </div>
      <>
        <Modal
          title="新增"
          visible={isModalVisible}
          width={1000}
          onOk={handleOk}
          onCancel={handleCancel}
        ></Modal>
      </>
      <List></List>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    isShow: state.isShow,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    showDown() {
      const action = { type: "showDown" };
      dispatch(action);
    },
    showUp() {
      const action = { type: "showUp" };
      dispatch(action);
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);
